let tzRewardData = [
  {
    id: 1,
    name: "摆烂证",
    img: "../images/tz-images/tu1.jpg",
    type: "获奖证书",
    selected: 0,
    detail:
      "北京时间10月5日下午，2021年诺贝尔物理学奖揭晓，三位科学家因复杂系统研究贡献而获奖。真锅淑郎（Syukuro Manabe）和克劳斯·哈塞尔曼（Klaus Hasselmann）因为“地球气候的物理建模，量化可变性并可靠地预测全球变暖”的研究共享了诺贝尔物理学奖的一半奖金。乔治·帕里西（Giorgio Parisi）因为“发现了从原子尺度到行星尺度的物理系统中的无序和涨落的相互作用”而获得了诺贝尔物理学奖的另一半奖金。",
  },
  {
    id: 2,
    name: "无骨证",
    img: "../images/tz-images/tu2.jpg",
    type: "认证证书",
    selected: 0,
    detail:
      "北京时间10月5日下午，2021年诺贝尔物理学奖揭晓，三位科学家因复杂系统研究贡献而获奖。真锅淑郎（Syukuro Manabe）和克劳斯·哈塞尔曼（Klaus Hasselmann）因为“地球气候的物理建模，量化可变性并可靠地预测全球变暖”的研究共享了诺贝尔物理学奖的一半奖金。乔治·帕里西（Giorgio Parisi）因为“发现了从原子尺度到行星尺度的物理系统中的无序和涨落的相互作用”而获得了诺贝尔物理学奖的另一半奖金。",
  },
  {
    id: 3,
    name: "狗头证",
    img: "../images/tz-images/tu3.jpg",
    type: "认证证书",
    selected: 0,
    detail:
      "北京时间10月5日下午，2021年诺贝尔物理学奖揭晓，三位科学家因复杂系统研究贡献而获奖。真锅淑郎（Syukuro Manabe）和克劳斯·哈塞尔曼（Klaus Hasselmann）因为“地球气候的物理建模，量化可变性并可靠地预测全球变暖”的研究共享了诺贝尔物理学奖的一半奖金。乔治·帕里西（Giorgio Parisi）因为“发现了从原子尺度到行星尺度的物理系统中的无序和涨落的相互作用”而获得了诺贝尔物理学奖的另一半奖金。",
  },
  {
    id: 4,
    name: "劫匪证",
    img: "../images/tz-images/tu4.jpg",
    type: "认证证书",
    selected: 0,
    detail:
      "北京时间10月5日下午，2021年诺贝尔物理学奖揭晓，三位科学家因复杂系统研究贡献而获奖。真锅淑郎（Syukuro Manabe）和克劳斯·哈塞尔曼（Klaus Hasselmann）因为“地球气候的物理建模，量化可变性并可靠地预测全球变暖”的研究共享了诺贝尔物理学奖的一半奖金。乔治·帕里西（Giorgio Parisi）因为“发现了从原子尺度到行星尺度的物理系统中的无序和涨落的相互作用”而获得了诺贝尔物理学奖的另一半奖金。",
  },
  {
    id: 5,
    name: "午睡证",
    img: "../images/tz-images/tu5.jpg",
    type: "获奖证书",
    selected: 0,
    detail:
      "北京时间10月5日下午，2021年诺贝尔物理学奖揭晓，三位科学家因复杂系统研究贡献而获奖。真锅淑郎（Syukuro Manabe）和克劳斯·哈塞尔曼（Klaus Hasselmann）因为“地球气候的物理建模，量化可变性并可靠地预测全球变暖”的研究共享了诺贝尔物理学奖的一半奖金。乔治·帕里西（Giorgio Parisi）因为“发现了从原子尺度到行星尺度的物理系统中的无序和涨落的相互作用”而获得了诺贝尔物理学奖的另一半奖金。",
  },
  {
    id: 6,
    name: "挨打证",
    img: "../images/tz-images/tu6.jpg",
    type: "认证证书",
    selected: 0,
    detail:
      "北京时间10月5日下午，2021年诺贝尔物理学奖揭晓，三位科学家因复杂系统研究贡献而获奖。真锅淑郎（Syukuro Manabe）和克劳斯·哈塞尔曼（Klaus Hasselmann）因为“地球气候的物理建模，量化可变性并可靠地预测全球变暖”的研究共享了诺贝尔物理学奖的一半奖金。乔治·帕里西（Giorgio Parisi）因为“发现了从原子尺度到行星尺度的物理系统中的无序和涨落的相互作用”而获得了诺贝尔物理学奖的另一半奖金。",
  },
  {
    id: 7,
    name: "修狗证",
    img: "../images/tz-images/tu7.jpg",
    type: "获奖证书",
    selected: 0,
    detail:
      "北京时间10月5日下午，2021年诺贝尔物理学奖揭晓，三位科学家因复杂系统研究贡献而获奖。真锅淑郎（Syukuro Manabe）和克劳斯·哈塞尔曼（Klaus Hasselmann）因为“地球气候的物理建模，量化可变性并可靠地预测全球变暖”的研究共享了诺贝尔物理学奖的一半奖金。乔治·帕里西（Giorgio Parisi）因为“发现了从原子尺度到行星尺度的物理系统中的无序和涨落的相互作用”而获得了诺贝尔物理学奖的另一半奖金。",
  },
  {
    id: 8,
    name: "摆烂证",
    img: "../images/tz-images/tu1.jpg",
    type: "获奖证书",
    selected: 0,
    detail:
      "北京时间10月5日下午，2021年诺贝尔物理学奖揭晓，三位科学家因复杂系统研究贡献而获奖。真锅淑郎（Syukuro Manabe）和克劳斯·哈塞尔曼（Klaus Hasselmann）因为“地球气候的物理建模，量化可变性并可靠地预测全球变暖”的研究共享了诺贝尔物理学奖的一半奖金。乔治·帕里西（Giorgio Parisi）因为“发现了从原子尺度到行星尺度的物理系统中的无序和涨落的相互作用”而获得了诺贝尔物理学奖的另一半奖金。",
  },
  {
    id: 9,
    name: "无骨证",
    img: "../images/tz-images/tu2.jpg",
    type: "认证证书",
    selected: 0,
    detail:
      "北京时间10月5日下午，2021年诺贝尔物理学奖揭晓，三位科学家因复杂系统研究贡献而获奖。真锅淑郎（Syukuro Manabe）和克劳斯·哈塞尔曼（Klaus Hasselmann）因为“地球气候的物理建模，量化可变性并可靠地预测全球变暖”的研究共享了诺贝尔物理学奖的一半奖金。乔治·帕里西（Giorgio Parisi）因为“发现了从原子尺度到行星尺度的物理系统中的无序和涨落的相互作用”而获得了诺贝尔物理学奖的另一半奖金。",
  },
  {
    id: 10,
    name: "狗头证",
    img: "../images/tz-images/tu3.jpg",
    type: "获奖证书",
    selected: 0,
    detail:
      "北京时间10月5日下午，2021年诺贝尔物理学奖揭晓，三位科学家因复杂系统研究贡献而获奖。真锅淑郎（Syukuro Manabe）和克劳斯·哈塞尔曼（Klaus Hasselmann）因为“地球气候的物理建模，量化可变性并可靠地预测全球变暖”的研究共享了诺贝尔物理学奖的一半奖金。乔治·帕里西（Giorgio Parisi）因为“发现了从原子尺度到行星尺度的物理系统中的无序和涨落的相互作用”而获得了诺贝尔物理学奖的另一半奖金。",
  },
  {
    id: 11,
    name: "劫匪证",
    img: "../images/tz-images/tu4.jpg",
    type: "认证证书",
    selected: 0,
    detail:
      "北京时间10月5日下午，2021年诺贝尔物理学奖揭晓，三位科学家因复杂系统研究贡献而获奖。真锅淑郎（Syukuro Manabe）和克劳斯·哈塞尔曼（Klaus Hasselmann）因为“地球气候的物理建模，量化可变性并可靠地预测全球变暖”的研究共享了诺贝尔物理学奖的一半奖金。乔治·帕里西（Giorgio Parisi）因为“发现了从原子尺度到行星尺度的物理系统中的无序和涨落的相互作用”而获得了诺贝尔物理学奖的另一半奖金。",
  },
  {
    id: 12,
    name: "午睡证",
    img: "../images/tz-images/tu5.jpg",
    type: "获奖证书",
    selected: 0,
    detail:
      "北京时间10月5日下午，2021年诺贝尔物理学奖揭晓，三位科学家因复杂系统研究贡献而获奖。真锅淑郎（Syukuro Manabe）和克劳斯·哈塞尔曼（Klaus Hasselmann）因为“地球气候的物理建模，量化可变性并可靠地预测全球变暖”的研究共享了诺贝尔物理学奖的一半奖金。乔治·帕里西（Giorgio Parisi）因为“发现了从原子尺度到行星尺度的物理系统中的无序和涨落的相互作用”而获得了诺贝尔物理学奖的另一半奖金。",
  },
  {
    id: 13,
    name: "挨打证",
    img: "../images/tz-images/tu6.jpg",
    type: "认证证书",
    selected: 0,
    detail:
      "北京时间10月5日下午，2021年诺贝尔物理学奖揭晓，三位科学家因复杂系统研究贡献而获奖。真锅淑郎（Syukuro Manabe）和克劳斯·哈塞尔曼（Klaus Hasselmann）因为“地球气候的物理建模，量化可变性并可靠地预测全球变暖”的研究共享了诺贝尔物理学奖的一半奖金。乔治·帕里西（Giorgio Parisi）因为“发现了从原子尺度到行星尺度的物理系统中的无序和涨落的相互作用”而获得了诺贝尔物理学奖的另一半奖金。",
  },
  {
    id: 14,
    name: "修狗证",
    img: "../images/tz-images/tu7.jpg",
    type: "获奖证书",
    selected: 0,
    detail:
      "北京时间10月5日下午，2021年诺贝尔物理学奖揭晓，三位科学家因复杂系统研究贡献而获奖。真锅淑郎（Syukuro Manabe）和克劳斯·哈塞尔曼（Klaus Hasselmann）因为“地球气候的物理建模，量化可变性并可靠地预测全球变暖”的研究共享了诺贝尔物理学奖的一半奖金。乔治·帕里西（Giorgio Parisi）因为“发现了从原子尺度到行星尺度的物理系统中的无序和涨落的相互作用”而获得了诺贝尔物理学奖的另一半奖金。",
  },
];
let tzFunctionArr=[];
let tzCurrentPageReward=1;
let tzTbodyReward=document.querySelector('tbody')
let tzPageDivReward=document.querySelector('.tz-page-div')
let tzSearchReward = document.querySelector(".tz-search-reward");
let tzSearchRewardReset = document.querySelector(".tz-search-reward-reset");
let tzSearchRewardInput = document.querySelector(".tz-search-reward-input");
let tzSearchReward2 = document.querySelector(".tz-search-reward2");
let tzSearchRewardReset2 = document.querySelector(".tz-search-reward-reset2");
let tzSearchRewardInput2 = document.querySelector(".tz-search-reward-input2");
let tzaddrewardsave = document.querySelector(".addrewardsave");
let tzaddrewardname = document.querySelector("#addrewardname");
let tzaddrewardimg = document.querySelector("#addrewardimg");
let tzrewardimgupload = document.querySelector("#tzrewardimgupload");
let tzaddrewardtype = document.querySelector("#addrewardtype");
let tzcheckalltablereward = document.querySelector("#tz-th1-reward");
let tzcheckallreward = document.querySelector(".checkallreward");
let tzconfirmdeletereward = document.querySelector(".deleterewarddelete");
let tzsortreward = document.querySelector(".tzsortreward");
let tzRewardDataId=15;
let tzListsOnePage=3;
let tzToPageButton;
let tzrewardsort3 = [];
let tzrewardsort4 = [];
tzrewardimgupload.style.backgroundImage = "url(../images/tz-images/tu8.png)";
tzrewardimgupload.addEventListener('click',function(){
  tzaddrewardimg.click();
})
tzaddrewardimg.addEventListener('change',function(){
  let filereader = new FileReader();
  filereader.readAsDataURL(tzaddrewardimg.files[0]);
  filereader.addEventListener("loadend", function () {
    jsonimgupload = event.target.result;
    tzrewardimgupload.style.backgroundImage = "url(" + event.target.result + ")";
  });
})
tzrewardsort3=tzRewardData;
function renderReward(arr){
    let pages = Math.ceil(arr.length / tzListsOnePage);
    let str='';
    let arrshow = arr.slice(
      (tzCurrentPageReward - 1) * tzListsOnePage,
      tzCurrentPageReward * tzListsOnePage
    );
    // console.log(arrshow,arr);
    for (
      let i = 0;
      i < arrshow.length;
      i++
    ) {
        if(arrshow[i].selected==0){
            str += `<tr data-id="${arrshow[i].id}">
                <td><label>
                        <input type="checkbox">
                    </label></td>
                <td>${i + 1 + (tzCurrentPageReward - 1) * tzListsOnePage}</td>
                <td>${arrshow[i].name}</td>
                <td><img src="${
                  arrshow[i].img
                }" alt="" class="tz-img-size"></td>
                <td>${arrshow[i].type}</td>
                <td><a data-toggle="modal" data-target="#detailreward${
                  arrshow[i].id
                }"></label>详情</a></td>
                <div class="modal fade" id="detailreward${
                  arrshow[i].id
                }" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                 <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">获奖详情</h4>
                </div>
                <div class="modal-body">
                ${arrshow[i].detail}
                </div>
                <div class="modal-footer">
                <button data-dismiss="modal" type="button" class="edit-btn btn btn-primary addrewardsave">收起</button>
                </div>
                </div>
                </div>
                </div></td>
                </tr>`;
        }else{
            str += `<tr data-id="${arrshow[i].id}">
                <td><label>
                        <input type="checkbox" checked>
                    </label></td>
                <td>${i + 1 + (tzCurrentPageReward - 1) * tzListsOnePage}</td>
                <td>${arrshow[i].name}</td>
                <td><img src="${
                  arrshow[i].img
                }" alt="" class="tz-img-size"></td>
                <td>${arrshow[i].type}</td>
                <td><a data-toggle="modal" data-target="#detailreward${
                  arrshow[i].id
                }" ></label>详情</a>
                <div class="modal fade" id="detailreward${
                  arrshow[i].id
                }" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                 <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">获奖详情</h4>
                </div>
                <div class="modal-body">
                ${arrshow[i].detail}
                </div>
                <div class="modal-footer">
                <button data-dismiss="modal" type="button" class="edit-btn btn btn-primary addrewardsave">收起</button>
                </div>
                </div>
                </div>
                </div></td>
                </tr>`;
        }
    }
    tzTbodyReward.innerHTML=str;
    str=''
    for(let i=1;i<=pages;i++){
        if(i==tzCurrentPageReward){
            str += `&nbsp;<button class="active-page tzWhichPageReward">${i}</button>`;
        }else{
            str+=`&nbsp;<button class="tzWhichPageReward">${i}</button>`
        }
    }
    tzPageDivReward.style.left=(750-27*(pages-1))+'px';
    str = `<button class="rewardprevious"><span class="glyphicon glyphicon-menu-left rewardprevious" aria-hidden="true"></span></button>
        ${str}
        <button class="rewardnext"><span class="glyphicon glyphicon-menu-right rewardnext" aria-hidden="true"></span></button>
        <select class="tzListsOnePagecss changePagedisplayReward">
    <option value="3">3条/页</option>
    <option value="4">4条/页</option>
    <option value="5">5条/页</option>
  </select>
        <span>跳至</span>
        <input type="text" class="tz-page-input" >
        <span>页</span>`;
    tzPageDivReward.innerHTML=str;
    tzToPageButton = document.querySelector(".tz-page-input");
}

function tzsortrewardfunc (arr){
  let tzrewardsort1 = [];
  let tzrewardsort2 = [];
  if(tzsortreward.className.includes('active-page')){
    tzsortreward.classList.remove("active-page")
    if(arr.length!=tzRewardData.length){
      arr=tzrewardsort4;
    }else{
      arr=tzrewardsort3
    }
  }else{
    tzsortreward.classList.add('active-page');
    for(let i=0; i<arr.length;i++){
      if(arr[i].type=='获奖证书'){
        tzrewardsort1.push(arr[i]);
      }else{
        tzrewardsort2.push(arr[i]);
      }
    }
    for(let i=0;i<tzrewardsort2.length;i++){
      tzrewardsort1.push(tzrewardsort2[i])
    }
    arr=tzrewardsort1;
  }
  console.log(arr);
  return arr;
}
function tzsortrewardfuncNormal() {
  tzRewardData = tzsortrewardfunc(tzRewardData);
  tzCurrentPageReward = 1;
  console.log(tzRewardData);
  renderReward(tzRewardData);
}
function tzsortrewardfuncFunc() {
  tzFunctionArr = tzsortrewardfunc(tzFunctionArr);
  tzCurrentPageReward = 1;
  console.log(tzFunctionArr);
  renderReward(tzFunctionArr);
}
tzsortreward.addEventListener("click", tzsortrewardfuncNormal);


function tzcheckreward(arr) {
  if (event.target.type == "checkbox") {
    if (event.target.className == "checkallreward") {
      if (event.target.checked == true) {
        for (let i = 0; i < arr.length; i++) {
          arr[i].selected = 1;
        }
      } else {
        for (let i = 0; i < arr.length; i++) {
          arr[i].selected = 0;
        }
      }
      renderReward(arr);
      return;
    }
    for (let i = 0; i < arr.length; i++) {
      if (
        event.target.parentNode.parentNode.parentNode.dataset.id == arr[i].id
      ) {
        if (arr[i].selected == 0) {
          arr[i].selected = 1;
          renderReward(arr);
        } else {
          arr[i].selected = 0;
          renderReward(arr);
        }
      }
    }
    for (let i = 0; i < arr.length; i++) {
      if(arr[i].selected==0){
        document.querySelector(".checkallreward").checked=false;
        return;
      }
    }
    document.querySelector(".checkallreward").checked = true;
  }
}
function tzcheckrewardNormal(){
  tzcheckreward(tzRewardData);
}
function tzcheckrewardFunc() {
  tzcheckreward(tzFunctionArr);
}
tzcheckalltablereward.addEventListener("click", tzcheckrewardNormal);
function tzToPageReward(arr){
    let pages = Math.ceil(arr.length / tzListsOnePage);
    if (
      event.target.className.includes("tzWhichPageReward")
    ) {
      tzCurrentPageReward = event.target.innerText;
      renderReward(arr);
    }
      if (
        event.target.className.includes("rewardprevious") &&
        tzCurrentPageReward > 1
      ) {
        tzCurrentPageReward--;
        renderReward(arr);
      }
    if (
      event.target.className.includes("rewardnext") &&
      tzCurrentPageReward < pages
    ) {
      tzCurrentPageReward++;
      renderReward(arr);
    }
    if( event.target.className.includes("tzListsOnePagecss")){
        tzCurrentPageReward=1;
        if(event.target.value!=tzListsOnePage){
            tzListsOnePage = event.target.value;
            renderReward(arr);
            let tzSeclctReward = document.querySelector(
              ".changePagedisplayReward"
            );
            tzSeclctReward.value = event.target.value;
        }

    }
}
function tzToPageInput(arr){
    let pages = Math.ceil(arr.length / tzListsOnePage);
    if (event.keyCode == 13) {
      let n = tzToPageButton.value;
      if (1 <= n && n <= pages) {
        tzCurrentPageReward = n;
        renderReward(arr);
      }
    }
}
function tzToPageRewardNormal(){
    tzToPageReward(tzRewardData);
}
function tzToPageInputNormal() {
  tzToPageInput(tzRewardData);
}
function tzToPageRewardFunc() {
  tzToPageReward(tzFunctionArr);
}
function tzToPageInputFunc() {
  tzToPageInput(tzFunctionArr);
}
function searchAllReward(who,what){
    let str=who.value;
    tzcheckallreward.checked = false;
    for(let i=0;i<tzRewardData.length;i++){
        tzRewardData[i].selected=0;
        tzrewardsort3[i].selected-0;
        if(tzrewardsort3[i][what].includes(str)){
            tzFunctionArr.push(tzrewardsort3[i]);
        }
    }
    tzrewardsort4=tzFunctionArr;
    if(tzFunctionArr.length>0){
        tzCurrentPageReward=1;
        renderReward(tzFunctionArr);
        tzPageDivReward.removeEventListener("click",tzToPageRewardNormal);
        tzPageDivReward.addEventListener("click",tzToPageRewardFunc);
        document.removeEventListener("keydown", tzToPageInputNormal);
        document.addEventListener("keydown", tzToPageInputFunc);
        tzcheckalltablereward.removeEventListener("click", tzcheckrewardNormal);
        tzcheckalltablereward.addEventListener("click", tzcheckrewardFunc);
        tzsortreward.removeEventListener("click", tzsortrewardfuncNormal);
        tzsortreward.addEventListener("click", tzsortrewardfuncFunc);
        if(tzsortreward.className.includes('active-page')){
          tzsortreward.classList.remove('active-page');
        }else{
          tzsortreward.classList.add("active-page");
          console.log(3333);
        }
        tzsortrewardfuncFunc();
    }
}
function tzResetAllReward(who){
  for (let i = 0; i < tzRewardData.length; i++) {
    tzRewardData[i].selected = 0;
  }
    tzcheckallreward.checked=false
    tzFunctionArr=[];
    who.value='';
    tzPageDivReward.removeEventListener("click", tzToPageRewardFunc);
    tzPageDivReward.addEventListener("click", tzToPageRewardNormal);
    document.removeEventListener("keydown", tzToPageInputFunc);
    document.addEventListener("keydown", tzToPageInputNormal);
    tzcheckalltablereward.removeEventListener("click", tzcheckrewardFunc);
    tzcheckalltablereward.addEventListener("click", tzcheckrewardNormal);
    tzsortreward.removeEventListener("click", tzsortrewardfuncFunc);
    tzsortreward.addEventListener("click", tzsortrewardfuncNormal);
    tzRewardData=tzrewardsort3;
    if (tzsortreward.className.includes("active-page")) {
      tzsortreward.classList.remove("active-page");
    } else {
      tzsortreward.classList.add("active-page");
    }
    tzsortrewardfuncNormal();
    tzCurrentPageReward=1;
    renderReward(tzRewardData);
}
function tzAddSaveReward(){
  tzrewardimgupload.style.backgroundImage = "url(../images/tz-images/tu8.png)";
    let json = {
      id: tzRewardDataId++,
      name: tzaddrewardname.value,
      img: jsonimgupload,
      type: tzaddrewardtype.value,
      selected: "0",
    };
    tzaddrewardname.value='';
    tzRewardData.push(json);
    renderReward(tzRewardData)
    tzrewardsort3 = tzRewardData;
}

function tzdeletereward (allarr,funcarr){
  for (let i = 0; i < funcarr.length; i++) {
    if (funcarr[i].selected == 1) {
      for (let j = 0; j < allarr.length; j++) {
        if (allarr[j].id == i) {
          allarr.splice(j, 1);
          break;
        }
      }
      funcarr.splice(i, 1);
      i--;
    }
  }
  for (let i = 0; i < allarr.length; i++) {
    if(allarr[i].selected==1){
      allarr.splice(i,1)
      i--;
    }
  }
  tzResetAllReward(tzSearchRewardInput);
  tzResetAllReward(tzSearchRewardInput2);
  tzrewardsort3=tzRewardData;
}

renderReward(tzRewardData);

tzPageDivReward.addEventListener("click", tzToPageRewardNormal);

document.addEventListener("keydown", tzToPageInputNormal);

tzSearchReward.addEventListener("click", function () {
  searchAllReward(tzSearchRewardInput, "name");
});

tzSearchRewardReset.addEventListener("click", function(){
    tzResetAllReward(tzSearchRewardInput);
});

tzSearchReward2.addEventListener("click", function () {
  searchAllReward(tzSearchRewardInput2, "type");
});

tzSearchRewardReset2.addEventListener("click", function () {
  tzResetAllReward(tzSearchRewardInput2);
});

tzaddrewardsave.addEventListener('click',tzAddSaveReward);

tzconfirmdeletereward.addEventListener('click',function(){
  tzdeletereward(tzRewardData,tzFunctionArr)
})

